<template>
  <div>
    <div class="h-100 page-box flex-column">
      <div class="btns-line">
        <el-button type="primary" icon="el-icon-plus" @click="showAddRule">新增规则</el-button>
      </div>
      <div class="flex-1 flow-y-auto">
        <data-table ref="table" :pageObj="params" @modifyItem="modifyItem" @deleteItem="deleteItem" element-loading-text="加载中..." height="580" v-bind="tableOptions" v-loading="tableLoading" :updateCallback="getRuleList">
        </data-table>
      </div>
    </div>
    <el-dialog :visible.sync="createRuleVisible" :title="dialogTitle" :close-on-click-modal="false" @close="dialogClose" custom-class="selfDialog" width="500px" v-loading="dialogLoading">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item prop="dataRuleName" label="名称" :rules="rules.dataRuleName">
          <el-input v-model="form.dataRuleName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item prop="dataRuleContent" label="内容" :rules="rules.dataRuleContent">
          <el-input v-model="form.dataRuleContent" placeholder="内容"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="描述" :rules="rules.description">
          <el-input v-model="form.description" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createRuleVisible = false" size="mini">取消</el-button>
        <el-button @click="subForm" size="mini" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <form-item name="123"></form-item>
  </div>
</template>

<script>
import { getRuleList, setRuleItem, delRuleItem } from "@/api/formApi";
import { validateIllegality } from "@/utils/validate";
import { confirm } from "@/utils/tools";

export default {
  name: "rulesManager",
  data() {
    return {
      params: {
        page: 1,
        size: 10,
        total: 0
      },
      searchData: {
        factoryId: window.localStorage.factoryId
      },
      tableLoading: false,
      tableOptions: {
        tableData: [],
        modifySettings: [
          {
            eventName: "modifyItem",
            name: "编辑",
            btnType: "",
            code: "mes-systemConfig-middleWare-btn_edit"
          },
          {
            eventName: "deleteItem",
            name: "删除",
            btnType: "danger",
            code: "mes-systemConfig-middleWare-btn_edit"
          }
        ],
        _columns: [
          {
            prop: "dataRuleName",
            label: "规则名称"
          },
          {
            prop: "dataRuleContent",
            label: "规则内容"
          },
          {
            prop: "description",
            label: "规则描述"
          }
        ]
      },
      rules: {
        dataRuleName: [
          {
            required: true,
            min: 1,
            max: 64,
            message: "请输入64个字符以内的名称",
            trigger: "blur"
          },
          { validator: validateIllegality, trigger: "blur" }
        ],
        dataRuleContent: [
          {
            required: true,
            min: 1,
            max: 256,
            message: "请输入1 ~ 256个字符的规则",
            trigger: "blur"
          }
        ],
        description: {
          min: 0,
          max: 256,
          message: "请输入256个字符以内的描述",
          trigger: "blur"
        }
      },
      form: {
        dataRuleName: null,
        dataRuleContent: null,
        description: null
      },
      createRuleVisible: false,
      isEdit: false,
      dialogTitle: "新建规则",
      dialogLoading: false
    };
  },
  created() {
    this.getRuleList();
  },
  methods: {
    getRuleList() {
      this.tableLoading = true;
      getRuleList(this.params, this.searchData).then(res => {
        this.tableLoading = false;
        this.tableOptions.tableData = res.data.rows;
        this.params.total = res.data.total;
        if (this.params.page > 1 && res.data.rows.length === 0) {
          this.params.page--;
          this.getRuleList();
        }
      }).catch(err => {
        this.tableLoading = false
      })
    },
    modifyItem(item) {
      this.isEdit = true;
      this.dialogTitle = "编辑规则";
      this.createRuleVisible = true;
      this.form = Object.assign({}, item);
    },
    deleteItem(item) {
      confirm("删除之后不可撤销，是否确定？").then(res => {
        delRuleItem({ dataRuleId: item.dataRuleId }).then(res => {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.getRuleList();
        })
      });
    },
    showAddRule() {
      this.isEdit = false;
      this.createRuleVisible = true;
      this.dialogTitle = "新建规则";
    },
    subForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogLoading = true
          this.form.factoryId = window.localStorage.factoryId;
          setRuleItem(this.form).then(res => {
            this.getRuleList();
            this.createRuleVisible = false;
          }).catch(err => {
            this.dialogLoading = false
          })
        } else {
          return false;
        }
      });
    },
    dialogClose() {
      this.form = {
        dataRuleName: null,
        dataRuleContent: null,
        description: null
      };
      this.dialogLoading = false
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-box {
  padding: 10px;
}
</style>
